<template>
  <div class="contain">
    <div>
      <!-- 查询 -->
      <el-row style="margin: 15px;">
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVOName" clearable placeholder="请输入追溯码" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVYear" clearable placeholder="请输入订单号" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVRNumber" clearable placeholder="请输入库位号" @clear="resetInputFields" />
        </el-col>
        <el-col :span="3" style="margin-right: 15px">
          <el-input v-model="inputVSUnit" clearable placeholder="请输入派送单位" @clear="resetInputFields" />
        </el-col>
        <el-col :span="2" style="margin-right: 0px">
          <el-button type="primary" icon="el-icon-search" @click="queryValidateForm">查询</el-button>
        </el-col>
        <el-col :span="1" style="margin-right: 0px">
          <el-button type="danger" icon="el-icon-search" @click="cancelValidateForm">取消</el-button>
        </el-col>
      </el-row>
    </div>
    <ul class="cards">
      <li class="card">
        <!-- 库房10-->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房10</h5>
          <span class="card_number">332</span>
        </div>
      </li>
      <li class="card card_box">
        <!-- 库房11 -->
        <div class="card_li" @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房11</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房1 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房1</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房2 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房2</h5>
          <span class="card_number">5</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房3 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房3</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房4 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房4</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房5 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房5</h5>
          <span class="card_number">4073</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房6 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房6</h5>
          <span class="card_number">36</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房7 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房7</h5>
          <span class="card_number">312</span>
        </div>
      </li>
      <li class="card">
        <!-- 库房9 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">库房9</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <!-- 后加 -->
      <li class="card">
        <!-- 特药库1 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">特药库1</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 特药库2 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">特药库2</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库1 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">精神药品库1</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库2 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">精神药品库2</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库3 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">精神药品库3</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 精神药品库4 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">精神药品库4</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 化学品库1 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">化学品库1</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 化学品库2 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">化学品库2</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 化学品库3 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">化学品库3</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <li class="card">
        <!-- 化学品库4 -->
        <div @click="openPopup">
          <div class="card_icon iconfont icon-jiankong">
            <img src="../../assets/index/card_icon6.png" alt="">
          </div>
          <h5 class="card__title">化学品库4</h5>
          <span class="card_number">0</span>
        </div>
      </li>
      <!-- 其他 -->
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    openPopup() {
      this.$router.push({ path: '/libraryExcess' }); // 跳转到库房超量页面
    }
  }
};
</script>

<style scoped>
/* 父级容器设置为70%宽度并居中 */
.contain {
  width: 100%;
  margin: 0 auto;
  /* background: pink; */
}

/* ul 样式设置为flex布局 */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
  list-style-type: none;
}

/* 每个 card 的宽度计算为 16% (每行6个) 并添加适当的间隙 */
.card {
  flex: 0 1 calc(16.66% - 10px);
  /* 6个卡片，每个卡片占 16.66% 减去间隙 */
  margin: 7px;
  margin-top: 25px;
  background-color: #f0f0f0;
  border-radius: 4px;
  text-align: center;
  padding: 7px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 图片样式 */
.cards .card_icon {
  position: absolute;
  z-index: 0;
  color: #ffffff36;
  font-size: 20px;
  width: 36px;
  height: 36px;
}

.cards .card_icon img {
  width: 36px;
  height: 36px;
}

/* 卡片的标题和数字样式 */
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cards .card__title {
  text-align: right;
  display: block;
  margin-top: 10px;
  color: #ffffffad;
  font-weight: 400;
  font-size: 16px;
}

.cards .card_number {
  text-align: right;
  color: #fff;
  display: block;
  margin-top: 11px;
  font-weight: 400;
  line-height: 45px;
  font-size: 24px;
  font-family: Arial;
}

.cards .card:nth-child(1) {
  background: linear-gradient(250deg, #009bff, #0070ff);
  box-shadow: 0 7px 9px #007aff38;
}

.cards .card:nth-child(2) {
  background: #f77763;
  box-shadow: 0 9px 9px #f377661c;
}

.cards .card:nth-child(3) {
  background: linear-gradient(250deg, #36c2d0, #29b2c0);
  box-shadow: 0 10px 7px #0a9cab1c;
}

.cards .card:nth-child(4) {
  background: linear-gradient(250deg, #5471e3, #4c67d1);
  box-shadow: 0 10px 9px #5471e31c;
}

.cards .card:nth-child(5) {
  background: linear-gradient(250deg, #f6b37c, #e47838);
  box-shadow: 0 10px 9px #f5a12c1c;
}

.cards .card:nth-child(6) {
  background: #519bff;
  box-shadow: 0 10px 9px #509aff1c;
}

.cards .card:nth-child(7) {
  background: linear-gradient(250deg, #009bff, #0070ff);
  box-shadow: 0 7px 9px #007aff38;
}

.cards .card:nth-child(8) {
  background: linear-gradient(250deg, #f6b37c, #e47838);
  box-shadow: 0 10px 9px #f5a12c1c;
}

.cards .card:nth-child(9) {
  background: #f77763;
  box-shadow: 0 9px 9px #f377661c;
}

.cards .card:nth-child(10) {
  background: linear-gradient(250deg, #36c2d0, #29b2c0);
  box-shadow: 0 10px 7px #0a9cab1c;
}

/* 特药库 1 */
.cards .card:nth-child(11) {
  background: linear-gradient(250deg, #ff6f61, #ff5252);
  box-shadow: 0 7px 9px rgba(255, 82, 82, 0.4);
}

/* 特药库 2 */
.cards .card:nth-child(12) {
  background: linear-gradient(250deg, #ff9e80, #ff6e40);
  box-shadow: 0 7px 9px rgba(255, 110, 64, 0.4);
}

/* 精神药品库 1 */
.cards .card:nth-child(13) {
  background: linear-gradient(250deg, #b39ddb, #9575cd);
  box-shadow: 0 7px 9px rgba(149, 117, 205, 0.4);
}

/* 精神药品库 2 */
.cards .card:nth-child(14) {
  background: linear-gradient(250deg, #7986cb, #5c6bc0);
  box-shadow: 0 7px 9px rgba(92, 107, 192, 0.4);
}

/* 精神药品库 3 */
.cards .card:nth-child(15) {
  background: linear-gradient(250deg, #64b5f6, #42a5f5);
  box-shadow: 0 7px 9px rgba(66, 165, 245, 0.4);
}

/* 精神药品库 4 */
.cards .card:nth-child(16) {
  background: linear-gradient(250deg, #4fc3f7, #29b6f6);
  box-shadow: 0 7px 9px rgba(41, 182, 246, 0.4);
}

/* 化学品库 1 */
.cards .card:nth-child(17) {
  background: linear-gradient(250deg, #81c784, #66bb6a);
  box-shadow: 0 7px 9px rgba(102, 187, 106, 0.4);
}

/* 化学品库 2 */
.cards .card:nth-child(18) {
  background: linear-gradient(250deg, #aed581, #9ccc65);
  box-shadow: 0 7px 9px rgba(156, 204, 101, 0.4);
}

/* 化学品库 3 */
.cards .card:nth-child(19) {
  background: linear-gradient(250deg, #ffb74d, #ffa726);
  box-shadow: 0 7px 9px rgba(255, 167, 38, 0.4);
}

/* 化学品库 4 */
.cards .card:nth-child(20) {
  background: linear-gradient(250deg, #ff8a65, #ff7043);
  box-shadow: 0 7px 9px rgba(255, 112, 67, 0.4);
}

/* 响应式设计：当屏幕宽度小于1200px时，每行显示4个卡片 */
@media (max-width: 1200px) {
  .card {
    flex: 0 1 calc(25% - 10px);
    /* 每行显示 4 个卡片 */
  }
}

/* 响应式设计：当屏幕宽度小于768px时，每行显示3个卡片 */
@media (max-width: 768px) {
  .card {
    flex: 0 1 calc(33.33% - 10px);
    /* 每行显示 3 个卡片 */
  }
}

/* 响应式设计：当屏幕宽度小于576px时，每行显示2个卡片 */
@media (max-width: 576px) {
  .card {
    flex: 0 1 calc(50% - 10px);
    /* 每行显示 2 个卡片 */
  }
}

/* 响应式设计：当屏幕宽度小于400px时，每行显示1个卡片 */
@media (max-width: 400px) {
  .card {
    flex: 0 1 100%;
    /* 每行显示 1 个卡片 */
  }
}
</style>
<style scoped>
/* 晃动动画定义 */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-5px);
  }
}

/* 为点击区域添加呼吸灯效果的边框 */
.card_box {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid transparent;
  animation: borderPulse 2s infinite;
  /* 呼吸灯效果 */
}

.card_li {
  animation: shake 2s infinite;
  /* 添加晃动动画 */
}

/* 呼吸灯效果定义 */
@keyframes borderPulse {
  0% {
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  }

  50% {
    border-color: rgba(255, 0, 0, 1);
    box-shadow: 0 0 45px rgba(255, 0, 0, 1);
  }

  100% {
    border-color: rgba(255, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
  }
}
</style>